<template>
	<div class="app-full-screen">
		<span @click="handleScreen">
			<fullscreen-exit-outlined v-if="fullScren == true" />
			<FullscreenOutlined v-else />
		</span>
	</div>
</template>

<script setup lang="ts">
import {
	FullscreenOutlined,
	FullscreenExitOutlined,
} from '@ant-design/icons-vue';
const fullScren = ref<boolean>(false);

const handleScreen = () => {
	if (fullscreenEnable()) {
		exitFullScreen();
	} else {
		// 指定元素全屏
		// const viewElement: any = document.querySelector(
		// 	'.app-content .app-nav-pos'
		// );
		// if (viewElement) {
		// 	elementFullscreen(viewElement);
		// }
		reqFullScreen();
	}
};

//浏览器判断是否全屏
const fullscreenEnable = () => {
	const isFullscreen =
		(document as any).isFullScreen ||
		(document as any).mozIsFullScreen ||
		(document as any).webkitIsFullScreen;
	return isFullscreen;
};

//监控F11
const keyDown = ($event: any) => {
	if ($event.keyCode == 122) {
		$event.returnValue = false;
		fullScren.value = !fullScren;
		handleScreen();
	}
};

//浏览器全屏
const reqFullScreen = () => {
	if ((document as any).documentElement.requestFullScreen) {
		(document as any).documentElement.requestFullScreen();
	} else if ((document as any).documentElement.webkitRequestFullScreen) {
		(document as any).documentElement.webkitRequestFullScreen();
	} else if ((document as any).documentElement.mozRequestFullScreen) {
		(document as any).documentElement.mozRequestFullScreen();
	}
};

//浏览器退出全屏
const exitFullScreen = () => {
	if ((document as any).documentElement.requestFullScreen) {
		(document as any).exitFullScreen();
	} else if ((document as any).documentElement.webkitRequestFullScreen) {
		(document as any).webkitCancelFullScreen();
	} else if ((document as any).documentElement.mozRequestFullScreen) {
		(document as any).mozCancelFullScreen();
	}
};

//指定节点全屏
const elementFullscreen = (element: any) => {
	if (element.requestFullscreen) {
		element.requestFullscreen();
	} else if (element.mozRequestFullScreen) {
		element.mozRequestFullScreen();
	} else if (element.msRequestFullscreen) {
		element.msRequestFullscreen();
	} else if (element.webkitRequestFullscreen) {
		element.webkitRequestFullScreen();
	}
};

//监控全屏状态和键盘
window.onresize = function () {
	if (fullscreenEnable()) {
		fullScren.value = true;
	} else {
		fullScren.value = false;
	}
};
window.addEventListener('keydown', keyDown, true);
</script>
